<template>
  <div class="cart-card" v-if="cartList.length">
    <section class="card-top">
      <span class="left">购物车</span>
      <span class="right" @click="clearCart"
        ><icon-svg icon-class="iconlajixiang"></icon-svg>清空</span
      >
    </section>
    <section class="cart-list">
      <food-card
        v-for="(item, index) in cartList"
        :key="index"
        :cartItem="item"
        :shopId="shopId"
      ></food-card>
    </section>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import foodCard from "./children/FoodCard";
export default {
  data() {
    return {};
  },
  computed: {
    cartList() {
      return this.cartFoodList;
    },
  },
  props: ["cartFoodList", "shopId"],
  components: { foodCard },
  created() {},
  mounted() {},
  methods: {
    ...mapMutations(["CLEAR_CART"]),
    clearCart() {
      this.CLEAR_CART(this.shopId);
    },
  },
  watch: {},
};
</script>
<style scoped lang="scss">
.cart-card {
  position: absolute;
  bottom: 2rem;

  width: 100%;

  background-color: rgba(0, 0, 0, .4);

  .card-top {
    height: 1.5rem;
    padding-right: .5rem;
    padding-left: .5rem;

    background-color: #eceff1;

    font-size: .625rem;
    line-height: 1.5rem;
  }
}

</style>
